Referencing HTML elements inside Shadow DOM - HTMHell

解決策

code:html

<div>

<label for="checkbox">I agree with the terms and conditions</label>

<fancy-checkbox id="checkbox">

<template shadowrootmode="open" shadowRootReferenceTarget="inner-checkbox">

<input type="checkbox" id="inner-checkbox" />

</template>

</fancy-checkbox>

</div>

code:html

<div>

<input type="text" aria-labelledby="label" />

<fancy-label id="label">

<template shadowrootmode="open" shadowRootReferenceTarget="inner-label">

<label id="inner-label">Type your name.</label>

</template>

</fancy-label>

</div>

code:html

<input

role="combobox"

type="text"

aria-controls="animals"

aria-activedescendant="animals"

/>

<animals-listbox id="animals">

<template

shadowrootmode="open"

shadowRootReferenceTargetMap="aria-controls: listbox,

aria-activedescendant: opt1"

<div role="listbox" id="listbox">

<div role="option" id="opt1">Otter</div>

<div role="option" id="opt2">Opossum</div>

<div role="option" id="opt3">Ocelot</div>

</div>

</template>

</animals-listbox>